<!-- 修改银行卡账号页面 -->
<template>
	<view class="bank-account-box">
		<view class="update-item">
			<u-input placeholder="请填写姓名" height="100" :custom-style="inputStyle" v-model="updateBankAccountDate.name" :clearable="false" />
		</view>
		<view class="update-item" v-if="bankTypeId === '2'">
			<u-input placeholder="请填写账户名称" height="100" :custom-style="inputStyle" v-model="updateBankAccountDate.account" :clearable="false" />
		</view>
		<view class="update-item u-rela" @click="isSelectShow = true">
			<text>{{selectText}}</text><u-select v-model="isSelectShow" :list="selectList" @confirm="selectDefineClick"></u-select>
			<u-icon class="select-icon" name="arrow-right" color="#CCCCCC"></u-icon>
		</view>
		<view class="update-item">
			<u-input placeholder="请填写银行卡号" height="100"  :custom-style="inputStyle" v-model="updateBankAccountDate.card" type="number" :clearable="false" />
		</view>
		
		<!-- 按钮区域 -->
		<view class="u-m-t-60">
			<!-- 使用确定按钮组件 -->
			<define-button @click="buttonClick"></define-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 此值为 1 表示用户点击的是修改银行卡账户，为 2 表示用户点击的是修改对公银行卡账户
			bankTypeId: '1',
			// 控制 select 选择器的打开和关闭状态
			isSelectShow: false,
			// 表单数据对象
			updateBankAccountDate: {
				name: '',
				card: '',	// 账户名称，只有对公银行卡账户才有此字段
				bank_id: 0,		// 对应银行的 id
				account: '',
				type: 3,	// 3 为银行账户、4 为银行对公账户
			},
			inputStyle: {
				fontSize: '36rpx',
				fontFamily: 'PingFang SC',
				fontWeight: 500,
				color: '#97979F',
			},
			selectList: [],
			// select 选中项的文本
			selectText: '请选择开户行',
			pageTitleText: '',
			
		}
	},
	onLoad(options) {
		this.getBankList()
		// console.log(options);
		this.bankTypeId = options.id
		this.updateBankAccountDate.name = options.name
		this.updateBankAccountDate.card = options.card
		this.updateBankAccountDate.bank_id = options.bank_id
		this.updateBankAccountDate.account = options.account || ''	// 对公账号时才有值
		// 动态设置页面标题
		if(this.updateBankAccountDate.card) {
			this.pageTitleText = '编辑账户信息'
		} else {
			this.pageTitleText = '添加账户'
		}
		uni.setNavigationBarTitle({
			title: this.pageTitleText
		})
		
	},
	methods: {
		// 获取开户行可选数据列表
		async getBankList() {
			const res = await this.$u.api.getBankList()
			if(!res) return
			for(let k in res) {
				let ind = {
					value: res[k].id,
					label: res[k].name
				}
				this.selectList.push(ind)
			}
			if(this.updateBankAccountDate.bank_id) {
				let index = this.selectList.findIndex(item => item.value == this.updateBankAccountDate.bank_id)
				this.selectText = this.selectList[index].label
			}
			
		},
		// select 选择器中的确定按钮点击事件
		selectDefineClick(selectObj) {
			// 把选中项的数据显示到页面并赋值到表单数据对象中
			this.selectText = selectObj[0].label
			this.updateBankAccountDate.bank_id = selectObj[0].value
		},
		// 提交
		async buttonClick() {
			if(!this.updateBankAccountDate.name || !this.updateBankAccountDate.card || !this.updateBankAccountDate.bank_id) return this.$u.toast('请先完善所需数据')
			if(this.bankTypeId === '1') {	// 银行账户
				const res = await this.$u.api.editProfileDatas(this.updateBankAccountDate)
				if(!res) return
				this.$u.route({
					type: 'back'
				})
				this.$u.toast( this.pageTitleText + '成功')
			} else {	// 银行对公账户
				if(!this.updateBankAccountDate.account) return this.$u.toast('请先完善所需数据')
				this.updateBankAccountDate.type = 4
				const res = await this.$u.api.editProfileDatas(this.updateBankAccountDate)
				if(!res) return
				this.$u.route({
					type: 'back'
				})
				this.$u.toast( this.pageTitleText + '成功')
			}
			
		}
	}
};
</script>

<style lang="scss" scoped>
	.bank-account-box {
		background-color: #F4F6FA;
		height: 100vh;
		padding-top: 20rpx;
		.update-item {
			height: 100rpx;
			line-height: 100rpx;
			background-color: white;
			border-bottom: 1rpx solid #E7EAF0;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #97979F;
			padding: 0 25rpx;
		}
	}
	.select-icon {
		position: absolute;
		top: 50%;
		right: 34rpx;
		transform: translateY(-50%);
	}
</style>
